<!--
 * @Author: ljc
 * @Date: 2023-04-27 17:11:02
 * @LastEditors: g05047
 * @LastEditTime: 2023-07-05 14:15:41
 * @Description: 分配专家
-->

<template>
  <div class="expert-main">
    <div class="expert-left">
      <rk-grid ref="notAssignRef"
        title="待指派专家列表"
        dataUrl="/reviewtask/notAssignExpertList"
        boxConfig
        :params="notAssignQueryParams"
        :columns="tableColumns"
        :pagerConfig="false">
      </rk-grid>
    </div>
    <div class="expert-center">
      <div>
        <el-button icon='ArrowUpBold'
          @click="handleMove('up')">上移</el-button>
      </div>
      <div>
        <el-button icon='ArrowDownBold'
          @click="handleMove('down')">下移</el-button>
      </div>
    </div>
    <div class="expert-right">
      <rk-grid ref="assignRef"
        title="已指派专家列表"
        dataUrl="/reviewtask/assignExpertList"
        boxConfig
        :params="assignQueryParams"
        :columns="tableColumns"
        :pagerConfig="false">
      </rk-grid>
    </div>
  </div>
</template>
  <script setup>
import XEUtils from 'xe-utils'
import IsUtils from '@/utils/is-utils.js'

const props = defineProps({
  taskDetailData: { type: [Object], default: () => ({}) }
})
const isAdd = ref(false)
const addTableData = ref([])
const delTableData = ref([])
// 未分配查询参数
let notAssignQueryParams = reactive({
  taskId: undefined
})
// 已分配查询参数
let assignQueryParams = reactive({
  taskId: undefined
})
const notAssignRef = ref(null)
const assignRef = ref(null)
watch(
  () => props.taskDetailData,
  (newValue, oldValue) => {
    nextTick(() => {
      if (!XEUtils.isEmpty(newValue)) {
        isAdd.value = false
        assignQueryParams.taskId = newValue.value.taskId
        notAssignQueryParams.taskId = newValue.value.taskId
      } else {
        isAdd.value = true
        assignQueryParams.taskId = undefined
        notAssignQueryParams.taskId = undefined
      }
    })
  },
  { deep: true, immediate: true }
)
const tableColumns = ref([
  { field: 'name', title: '姓名', width: 120, align: 'center', },
  {
    field: 'sex', title: '姓别', width: 120, align: 'center', formatter: ({ cellValue }) => {
      let sex = cellValue
      if (sex) {
        sex = cellValue == 1 ? '男' : '女'
      } else {
        sex = ''
      }
      return sex
    }
  },
  { field: 'age', title: '年龄', width: 120, align: 'center', },
  { field: 'title', title: '职称', width: 120, align: 'center', },
  { field: 'taskNum', title: '参与评审任务次数', width: 150, align: 'center', },
  { field: 'applyNum', title: '参与评审项目数', width: 150, align: 'center', },
  { field: 'phone', title: '手机号', width: 250, align: 'center', },
  { field: 'idCard', title: '身份证号', width: 250, align: 'center', },
  { field: 'introduction ', title: '简介', width: 250, align: 'left', },
])
/**上移和下移方法 */
const handleMove = (type) => {
  if (type === 'up') {//上移
    const seleRows = assignRef.value.getCheckboxRecords()
    handleAddRows(notAssignRef, seleRows)
    handleDelRows(assignRef)
    handleGetAssignData(type, seleRows)
  } else if (type === 'down') {// 下移
    const seleRows = notAssignRef.value.getCheckboxRecords()
    handleAddRows(assignRef, seleRows)
    handleDelRows(notAssignRef)
    handleGetAssignData(type, seleRows)
  }
}
// 添加内容
const handleAddRows = (ref, array) => {
  if (array.length) {
    const data = ref.value.getTableData()
    const tableData = data.tableData
    array.forEach(async element => {
      if (!IsUtils.isInclude(tableData, element.expertId)) {
        await ref.value.insertAt(element)
      }
    });
  }
}
// 删除内容
const handleDelRows = async (ref) => {
  await ref.value.removeCheckboxRow()
}
// 获取已经分配项目数据
const handleGetAssignData = (type, array) => {
  if (array.length) {
    array.forEach(async element => {
      if (type === 'up') { // 上移
        // console.log(element)
        if (!IsUtils.isInclude(delTableData.value, element.expertId)) {
          delTableData.value.push(element)
        }
        if (IsUtils.isInclude(addTableData.value, element.expertId)) {
          const index = addTableData.value.findIndex(item => item.expertId === element.expertId)
          addTableData.value.splice(index, 1)
        }
      } else if (type === 'down') { // 下移
        if (!IsUtils.isInclude(addTableData.value, element.expertId)) {
          addTableData.value.push(element)
        }
        if (IsUtils.isInclude(delTableData.value, element.expertId)) {
          const index = delTableData.value.findIndex(item => item.expertId === element.expertId);
          delTableData.value.splice(index, 1)
        }
      }
    })
  }
}
/**获取数据 */
const getExpertData = () => {
  let isVailde = false
  const { tableData } = assignRef.value.getTableData()
  if (tableData && tableData.length > 0) {
    isVailde = true
  } else {
    isVailde = false
  }
  return { addTableData: addTableData.value, delTableData: delTableData.value, isVailde }
}
// 对外暴露方法
defineExpose({
  getExpertData
})
</script>
 <style lang="scss" scoped>
.expert-main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .expert-left {
    flex: 1;
    height: 0;
  }
  .expert-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    div {
      text-align: center;
      margin: 20px;
      .el-button {
        width: 100%;
        padding: 20px;
      }
    }
  }
  .expert-right {
    flex: 1;
    height: 0;
  }
}
</style>